<template>
  <div >
    <div class="navs">
       登录
    </div>

    <div class="form">
      <div class="item">
        <input type="text" placeholder="请输入手机号码/电子邮箱" autocomplete="off" v-model="phone" />
      </div>
      <div class="item">
        <input class="pwd" type="password" placeholder="请输入密码" autocomplete="off" v-model="password"/>
        <button class="btn1" type="button" @click="$router.push('/forgotpwd')">找回密码</button>
      </div>
      <div class="submit">
        <button class="button" type="submit" :disabled="!phone||!password" @click="postData">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import {isphone, isEmail} from '../utils/utils'
import {adds} from '../router/api'
import '../css/login.less'
export default {
  name: 'login',
  data () {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    postData () {
      let phone = this.phone
      let password = this.password
      if (!isphone(this.phone) && !isEmail(this.phone)) {
        this.$message({message: '请输入正确的账户', iconClass: 'icon-hide'})
        return
      }
      if (phone && password) {
        adds(phone, password).then(d => {
          if (d.code === 200) {
            this.$message({
              message: '登录成功',
              iconClass: 'icon-hide',
              duration: 1000
            })
          } else {
            this.$message({
              message: d.message,
              iconClass: 'icon-hide',
              duration: 1000
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
*{
  margin:0;
  padding:0;
}
.navs{
  width:100%;
  height:1rem;
  background: pink;
  font-size: .35rem;
  line-height: 1rem;
}
</style>
